<?php include(BASE_PATH . "/view/layout/layoutP.phtml"); ?>
<style>

.root-background {
    background-color: #F2F2F2;
    background-image: url(/img/service/background.jpg);
    background-position: 50% 25%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #333;
    width: 100%;
    height: 700px;	
}
.service-cont{
	width: 1000px;
	margin:0 auto;
	padding-top: 50px;
}
.service-title{
	font-size: 24px;
	font-weight: 500;
    margin-bottom: 10px;
}
.service-list{
	width: 15%;
	height: 500px;
}
.list-cont{
	width: 80%;
	height: 500px;
}
.content-item{
	padding-top: 15px;
    padding-bottom: 15px;
    list-style-type: none;
    position: relative;
    border-bottom: 1px dotted #333;
    color: gray;
    cursor: pointer;
}
.content-item:hover{
	color: #eb1d21;
}
.li_cont{display: none;}
.list-cont div[dic='1']{display: block;}

.yu_form{
	margin-left: 80px;
    border: 1px solid #f5f5f5;
    background: white;
    padding-top: 20px;
    border-radius: 13px;
}
.yu_form h3{
	font-size: 24px;
    font-weight: 500;
    margin-bottom: 15px;
    padding-left:20px;
}
.yu_form p{
	padding-left:20px;
}
.form_title{
	font-weight: 700;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: right;
    padding-left:20px;
}
.form_ti{
	color: #eb1d21;
    float: right;
    margin-right: 20px;
}
.form_cont{
	margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
    height: 430px;
}
.input_cont{
	padding:20px;
}
.form_cont dl {
    height: 50px;
    line-height: 50px;
    display: inline-block;
}
.form_cont dt {
    width: 95px;
    float: left;
    text-align: right;
    padding-right: 18px;
}
.form_cont dt>i {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    color: #ff233f;
    padding-right: 3px;
}
.form_cont dd {
    float: left;
    position: relative;
    padding-top: 10px;
}
.form_cont input{
    padding-left: 10px;
    height: 30px;
    width: 180px;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
}
.form_cont input:hover{
	 border: 1px solid;
}
.form_cont .no_i {
    height: 50px;
    padding-top: 15px;
}
.input_div{
	margin-top:0px;
}
.form_cont .width360{cursor: pointer;}
.form_cont .width300{width: 300px;}
.form_cont .sfi {
    position: absolute;
    right: 10px;
    top: 12px;
    letter-spacing: 2px;
}
.form_cont select {
    padding-left: 10px;
    height: 30px;
    width: 100px;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
}
.orderForm select:hover {
    border: 1px solid;
}
.weight-description{
	width: 55%;
    float: right;
    position: relative;
    top: 8px;
    left: -21px;
}
.textarea{
	height: auto;
    width: 575px;
    display: block;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
}
.textarea:hover{
	border: 1px solid;
}
.service-btn{
	background-color: #eb1d21;
    background-image: linear-gradient(#f7282c,#c21e22);
    border: none;
    height: 32px;
    width: 120px;
    color: #fff;
    border-radius: 3px;
    margin-right: 20px;
    position: relative;
}
.service-btn:hover {
    top: -1px;
    background-color: #a94442;
    background-image: linear-gradient(#eb1d21,#a94442);
}
.service-yu{
	margin-top: 40px;
    text-align: center;
}
.orderCont{
	height: 500px;
}
.orderCont dl {
    height: 50px;
    line-height: 50px;
    display: inline-block;
}
.orderCont dt {
    width: 95px;
    float: left;
    text-align: right;
    padding-right: 18px;
}
.orderCont dt>i {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    color: #ff233f;
    padding-right: 3px;
}
.orderCont dd {
    float: left;
    position: relative;
    padding-top: 10px;
}
.orderCont input{
    padding-left: 10px;
    height: 30px;
    width: 400px;
    border: 1px solid #cdcdcd;
    border-radius: 3px;
    margin-left: 20px;
    margin-right: 20px;
}
.orderCont input:hover{
	 border: 1px solid;
}
.orderCont .no_i {
    height: 50px;
    padding-top: 15px;
}
.orderCont .input_div{
	margin-top:0px;
	padding-left: 20px;
}
.orderCont .width360{cursor: pointer;}
.orderCont .width300{width: 300px;}
.orderCont .sfi {
    position: absolute;
    right: 10px;
    top: 12px;
    letter-spacing: 2px;
}
</style>
<input id="yadress" type="hidden" value="<?php echo $data['yadress']?>">
<input id="madress" type="hidden" value="<?php echo $data['madress']?>">
<div class="root-background">
	<div class="service-cont">
		<h3 class="service-title">服务支持</h3>
		<div class="service-list fl">
			<ul>
				<li class="content-item" dic="1">我要寄件</li>
				<li class="content-item" dic="2">运单追踪</li>
				<li class="content-item" dic="3">收寄范围查询</li>
				<li class="content-item" dic="4">运费查询</li>
			</ul>
		</div>
		<div class="list-cont fl">
			<div class="li_cont" dic="1">
				<div class="yu_form">
					<h3>免费预约上门取件</h3>
					<p>提供您的寄件信息，即刻预约快递员上门为您取件</p>
					<div class="form_cont">
						<div>
							<span class="form_title">寄件人信息</span>
							<span class="form_ti">标题带*为必填项</span>
						</div>
						<div class="input_div">
							<dl>
				                <dt><i>*</i>姓名</dt>
				                <dd>
				                    <input type="text" name="name" placeholder="请填写寄件人姓名">
				                </dd>
				            </dl>
				            <dl>
				                <dt class="no_i">寄件公司</dt>
				                <dd>
				                    <input type="text" name="name" placeholder="请填写寄件公司">
				                </dd>
				            </dl>
				        </div>
				        <div class="input_div">
							<dl>
				                <dt><i>*</i>上门地址</dt>
				                <dd>
				                    <input class="width360" type="text" name="name" placeholder="省-市-区" readonly="readonly">
				                    <span class="sfi">...</span>
				                </dd> 
				            </dl>
				            <dl>
				                <dt><i>*</i>详细地址</dt>
				                <dd>
				                    <input class="width300" type="text" name="name" placeholder="请输入街道地址">
				                </dd>
				            </dl>
				        </div>
				        <div class="input_div">
							<dl>
				                <dt><i>*</i>联系电话</dt>
				                <dd>
				                    <input type="text" name="name" placeholder="请填写联系电话" >
				                   
				                </dd> 
				            </dl>
				            <dl>
				                <dt class="no_i">固定电话</dt>
				                <dd>
				                    <input type="text" name="name" placeholder="请填写固定电话">
				                </dd>
				            </dl>
				        </div>
				        <div class="input_div">
				            <dl>
				                <dt class="no_i">重量</dt>
				                <dd>
				                     <select>
				                        <option>0-2kg</option>
				                        <option>2-5kg</option>
				                        <option>5-10kg</option>
				                        <option>10-20kg</option>
				                        <option>20kg以上</option>
				                    </select>
				                </dd>
				            </dl>
				            <div class="weight-description">
              					此处仅用来提醒收派员使用更适宜的交通工具上门收取您的快件。若寄多个快件，则此处请选择总重量范围。</div>
				        </div>
				        <div class="input_div">
				            <dl>
				                <dt class="no_i">备注</dt>
				                <dd>
				                    <textarea class="textarea" data-parsley-maxlength="20" name="remark" id="remark" rows="3" placeholder="若您寄的物品虽不重但体积较大，请在这里注明。限20个字符以内。"></textarea>
				                </dd>
				            </dl>
				        </div>
				        <div class="service-yu">
	                        <button class="service-btn">预约</button>
	                    </div>
					</div>

				</div>
			</div>
			<div class="li_cont" dic="2">
				<div class="yu_form">
					<div class="orderCont">
						<h3>运单追踪</h3>
						<input type="text" name="orderNo" placeholder="请输入运单号">
						<button class="service-btn">查询</button>
					</div>
				</div>
			</div>
			<div class="li_cont" dic="3">
				<div class="yu_form">
					<div class="orderCont">
						<h3>收寄范围查询</h3>
						<input class="width360" type="text" name="name" placeholder="省-市-区" readonly="readonly">
				    
						<button class="service-btn">查询</button>
					</div>
				</div>
			</div>
			<div class="li_cont" dic="4">
				<div class="yu_form">
					<div class="orderCont">
						<h3>运费查询</h3>
						<div class="input_div">
							<dl>
				                <dt><i>*</i>原寄地地区</dt>
				                <dd>
				                    <input class="width360" type="text" name="name" placeholder="请选择原寄地地区" readonly="readonly" value="<?php echo $data['yadress']?>">
				                </dd>
				            </dl>
				        </div>
				        <div class="input_div">
							<dl>
				                <dt><i>*</i>目的地地区</dt>
				                <dd>
				                    <input class="width360" type="text" name="name" placeholder="请选择目的地地区" readonly="readonly" value="<?php echo $data['madress']?>">
				                </dd>
				            </dl>
				        </div>
				        <div class="service-yu">
	                        <button class="service-btn">查询</button>
	                    </div>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	Service.init();
})
var Service = {
	init:function(){
		this.tabEvent();
		if($("#yadress").val() || $("#madress").val()){
			var dic = "4";
			$(".li_cont").hide();
			$(".list-cont").find("div[dic="+dic+"]").show();
		}
		this.cityEvent();	
	},
	tabEvent:function(dic){
		$(".content-item").click(function(){
			var dic = $(this).attr("dic");
			$(".li_cont").hide();
			$(".list-cont").find("div[dic="+dic+"]").show();
		})
	},
	cityEvent:function(){
		$(".width360").click(function(e){
			 SelCity(this,e);
		})
	},
}
</script>
<?php include(BASE_PATH . "/view/layout/footer.phtml"); ?>